{% extends "base.html" %}
{% block title %}帖子审核 - Online Judge{% endblock %}

{% block content %}
<div class="container mx-auto py-8 px-4 sm:px-6 lg:px-8">
  <!-- 页面标题区域 -->
  <div class="mb-8">
    <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-800 flex items-center">
      <i class="fas fa-gavel text-blue-600 mr-3"></i>
      帖子审核
      <span class="ml-3 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
        {{ pending_posts|length }} 个待审核
      </span>
    </h1>
    <p class="text-gray-500 mt-2">审核用户发布的帖子，确保内容符合社区规范</p>
  </div>
  
  {% if pending_posts %}
    <!-- 帖子列表 -->
    <div class="space-y-6">
      {% for post in pending_posts %}
        <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border-l-4 border-yellow-500 transform hover:-translate-y-1 transition-transform duration-300">
          <div class="p-6">
            <!-- 帖子标题和元信息 -->
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4">
              <div>
                <h3 class="text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-200">
                  {{ post.title }}
                </h3>
                <div class="flex items-center mt-2 text-sm text-gray-500">
                  <i class="fas fa-user-circle mr-1"></i>
                  <span>{{ post.author.username }}</span>
                  <span class="mx-2">•</span>
                  <i class="fas fa-clock mr-1"></i>
                  <span>{{ post.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                </div>
              </div>
              <span class="mt-2 sm:mt-0 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                待审核
              </span>
            </div>
            
            <!-- 帖子内容预览 -->
            <div class="text-gray-700 leading-relaxed mb-6 border-b border-gray-100 pb-4">
              {{ post.content|truncate(300) }}
              {% if post.content|length > 300 %}
                <button class="text-blue-600 hover:text-blue-800 text-sm font-medium mt-2 inline-flex items-center">
                  查看全部 <i class="fas fa-chevron-down ml-1 text-xs"></i>
                </button>
              {% endif %}
            </div>
            
            <!-- 操作按钮 -->
            <div class="flex flex-wrap gap-3 justify-end">
              <!-- “通过”按钮表单 -->
              <form method="POST" action="{{ url_for('approve_post', post_id=post.id) }}" class="inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">  
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200">
                  <i class="fas fa-check mr-2"></i> 通过
                </button>
              </form>

              <!-- “驳回”按钮表单 -->
              <form method="POST" action="{{ url_for('reject_post', post_id=post.id) }}" class="inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">  
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200">
                  <i class="fas fa-times mr-2"></i> 驳回
                </button>
              </form>
              
              <!-- 查看详情按钮 -->
              <form method="POST" action="{{ url_for('forum_post', post_id=post.id) }}" class="inline">
              <button class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
                <i class="fas fa-eye mr-2"></i> 查看详情
              </button>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    
    <!-- 分页控件 -->
    {% if pagination %}
    <div class="mt-8 flex justify-center">
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="{{ url_for('moderate_posts', page=pagination.prev_num) if pagination.has_prev else '#' }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 {% if not pagination.has_prev %}opacity-50 cursor-not-allowed{% endif %}">
          <span class="sr-only">上一页</span>
          <i class="fas fa-chevron-left"></i>
        </a>
        
        {% for page_num in pagination.iter_pages() %}
          {% if page_num %}
            <a href="{{ url_for('moderate_posts', page=page_num) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium {% if page_num == pagination.page %}z-10 bg-blue-50 border-blue-500 text-blue-600{% else %}text-gray-700 hover:bg-gray-50{% endif %}">
              {{ page_num }}
            </a>
          {% else %}
            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
              ...
            </span>
          {% endif %}
        {% endfor %}
        
        <a href="{{ url_for('moderate_posts', page=pagination.next_num) if pagination.has_next else '#' }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 {% if not pagination.has_next %}opacity-50 cursor-not-allowed{% endif %}">
          <span class="sr-only">下一页</span>
          <i class="fas fa-chevron-right"></i>
        </a>
      </nav>
    </div>
    {% endif %}
    
  {% else %}
    <!-- 空状态显示 -->
    <div class="text-center py-16 px-4 bg-gray-50 rounded-xl border border-gray-100">
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-6">
        <i class="fas fa-check-circle text-2xl text-green-600"></i>
      </div>
      <h3 class="text-lg font-medium text-gray-900 mb-2">所有帖子均已审核</h3>
      <p class="max-w-md mx-auto text-gray-500">目前没有需要审核的帖子，您可以稍后再来查看。</p>
      <a href="{{ url_for('admin_dashboard') }}" class="mt-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200">
        返回控制台 <i class="fas fa-arrow-right ml-2"></i>
      </a>
    </div>
  {% endif %}
</div>
{% endblock %}
